<template>
  <div class="page-banner-add">
    <n-form ref="formRef" :model="model" :rules="rules">
      <n-form-item label="Alt" path="alt">
        <n-input v-model:value="model.alt" placeholder="请输入alt" />
      </n-form-item>

      <n-form-item label="Link" path="link">
        <n-input v-model:value="model.link" placeholder="请输入link" />
      </n-form-item>

      <n-form-item label="Img" path="img">
        <n-upload
          list-type="image-card"
          :max="1"
          @before-upload="handleBeforeUpload"
        >
          点击上传
        </n-upload>
      </n-form-item>

      <n-form-item>
        <n-button type="primary" @click="handleClick">确认</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>

<script>
import { addBanner } from "@/api/banner";

export default {
  data() {
    return {
      model: {
        alt: "",
        link: "",
        img: "",
      },
      rules: {
        alt: [{ required: true, message: "请输入Alt", trigger: "blur" }],
        link: [{ required: true, message: "请输入Link", trigger: "blur" }],
        img: [{ required: true, message: "请上传Img", trigger: "blur" }],
      },
    };
  },

  methods: {
    handleBeforeUpload({ file }) {
      // console.log(file);
      // file.file 是一个原生的 File 对象，需要将它转换成 base64 字符串，使用 FileReader API

      // 1. 创建一个 FileReader 实例
      const fileReader = new FileReader();
      // 2. 调用 fileReader.readAsDataURL 以 base64 方法读取文件
      fileReader.readAsDataURL(file.file);
      // 3. 监听 fileReader.onload 事件，处理读取完成回调
      fileReader.onload = () => {
        // 读取成功，通过 fileReader.result 获取结果
        // console.log("读取成功", fileReader.result);
        // 将 结果 赋值给 model.img
        this.model.img = fileReader.result;
      };
      fileReader.onerror = () => {
        console.log("读取失败");
      };
    },

    async handleClick() {
      // 1. 表单校验
      await this.$refs.formRef.validate();
      // 2. 调用接口
      await addBanner(this.model);
      // 3. 成功
      this.$message.success("新增成功");
    },
  },
};
</script>
